<%--
  Created by IntelliJ IDEA.
  User: 22711
  Date: 2021/10/4
  Time: 11:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/css/car_rental/car_detail.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet">
    <style>


    </style>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--=======================================1. 标题================================================-->
<div class="header">
    <div class="head-top">
        <div class="w1180 top-linkbox">
            <div class="top-left">
                <c:if test="${empty loginCustomer}">

                    <span><a class="size-color" href="${pageContext.request.contextPath}/customer/login" target="_top">登录</a></span>
                    <span>|</span>
                    <span><a class="size-color" href="${pageContext.request.contextPath}/customer/register">免费注册</a></span>
                    <span>|</span>
                    <span><a href="">我的小橘</a></span>
                </c:if>
                <c:if test="${!empty loginCustomer}">
                    <span>欢迎${loginCustomer.custName}登录</span>,
                    <span><a class="size-color" href="${pageContext.request.contextPath}/customer/logout">退出</a></span>
                </c:if>
            </div>
            <div class="top-right">
                <span><a href="">帮助中心</a></span>
                <span>|</span>
                <span><a href="">网址导航</a></span>
                <span>|</span>
                <span><a href="">English</a></span>
                <span>|</span>
                <span>400-888-6608</span>
                <span>|</span>
                <span><a href="">微信</a></span>
            </div>
        </div>
    </div>
    <div class="head-bottom">
        <div class="w1180">
            <a href="" class="logo"></a>
            <div class="nav">
                <ul class="nav-wrap">
                    <li><a href="">首页</a></li>
                    <li><a href="">热门车型</a></li>
                    <li><a href="">车型查询</a></li>
                    <li><a href="">营业网点</a></li>
                    <li><a href="">精彩活动</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--====================================内容========================================-->
<div class="w1180">
    <div class="myshowbox">
        <div class="myshowbox-container">
            <a href="javascript:void(0)" class="btn-close"><span></span></a>
            <div class="div-myshowbox" style="width: 1180px; height: 450px; border-bottom: 1px #78767a solid;">
                <div class="common-modalBox">
                    <div class="current-carname">
                        <h3>${serverResponse.data.carName}</h3>
                    </div>
                </div>
                <div class="current-carbox">
                    <div class="current-carlist">
                        <div class="current-carinfo">

                            <div class="current-carpic">
                                <img src="${pageContext.request.contextPath}/${serverResponse.data.carImagePath}" alt="">
                                <span class="video-playbtn video-li" data-cartypeids="421" id="carInfoVideo"></span>
                            </div>
                            <p>${serverResponse.data.carName}</p>
                        </div>
                        <ul class="current-carconfigure clear_float">
                            <li id="li-first-child">
                                <p class="configure-name"><span class="configure-icon">
                                    <img src="${pageContext.request.contextPath}/images/car-shift.png" alt=""></span></p>
                                <p>变速箱:<span>${serverResponse.data.carShiftType}</span></p>
                            </li>
                            <li>
                                <p class="configure-name"><span class="configure-icon"><img src="${pageContext.request.contextPath}/images/car-tank-capacity.png" alt=""></span></p>
                                <p>油箱容量:<span>${serverResponse.data.carTankCapacity}</span></p>
                            </li>
                            <li>
                                <p class="configure-name"><span class="configure-icon"><img src="${pageContext.request.contextPath}/images/car-displacement.png" alt=""></span></p>
                                <p>排量:<span>${serverResponse.data.carDisplacement}</span>L</p>
                            </li>
                            <li>
                                <p class="configure-name"><span class="configure-icon"><img src="${pageContext.request.contextPath}/images/car-seat-number.png" alt=""></span></p>
                                <p>座位数:<span>${serverResponse.data.carSeatNumber}</span></p>
                            </li>
                            <li>
                                <p class="configure-name"><span class="configure-icon"><img src="${pageContext.request.contextPath}/images/car-air-inlet-mode.png" alt=""></span></p>
                                <p>进气:<span>${serverResponse.data.carAirInletMode}</span></p>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="current-carintro">
                    <h3>车辆颜色说明</h3>
                    <p>车辆颜色请以门店为准，图片仅为车型示意图。</p>
                </div>
            </div>
        </div>
        <%--========================评论区============================================--%>
        <div class="comment-box">
            <h3 style="cursor: pointer" class="comment-title">显示评论</h3>
            <div style="display: none;" class="replay-show-hiden">
                <ul class="comment-ul">
<%--                    <li class="comment-li">--%>
<%--                        <div class="comment-customer">--%>
<%--                            <div class="customer-img">--%>
<%--                                <img src="${pageContext.request.contextPath}/images/customer1.png">--%>
<%--                            </div>--%>
<%--                            <div class="a-link">--%>
<%--                                <h5 class="customer-name">LiHua</h5>--%>
<%--                                <span class="type-text">车子很干净，nice，车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，车子很干净，nice，车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，车子很干净，nice，车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，车子很干净，nice，车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，车子很干净，nice，车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，车子很干净，nice，车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，车子很干净，nice，车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，车子很干净，nice，车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，车子很干净，nice，车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，车子很干净，nice，车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，车子很干净，nice，车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，车子很干净，nice，车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice车子很干净，nice</span>--%>
<%--                                <div class="comment-handle">--%>
<%--                                    <span class="evaluate-time">2021/9/3 12:20:33</span>--%>
<%--                                    <a class="replay-handle" href="">回复</a>--%>
<%--                                    <span>|</span>--%>
<%--                                    <a href="">--%>
<%--                                        <span class="icon-act"></span>--%>
<%--                                    </a>--%>
<%--                                    <span  class="praise-number">100</span>--%>
<%--                                </div>--%>

<%--                            </div>--%>
<%--                        </div>--%>
<%--                        <ul class="replay-ul">--%>
<%--                            <li>--%>
<%--                                <div class="replay-customer">--%>
<%--                                    <div class="replay-img">--%>
<%--                                        <img src="${pageContext.request.contextPath}/images/customer1.png">--%>
<%--                                    </div>--%>
<%--                                    <h6 class="replay-customer-name">Smith</h6>--%>
<%--                                    <!--                            <h6>Smith</h6>-->--%>
<%--                                    <span class="replay-text">这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。这么好！我也租几辆玩玩。</span>--%>
<%--                                    <span class="replay-time">2021-9-9 10:20:11</span>--%>
<%--                                </div>--%>
<%--                            </li>--%>
<%--                        </ul>--%>
<%--                    </li>--%>
                </ul>
            </div>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/js/car_rental/car_detail.js"></script>
<script src="${pageContext.request.contextPath}/dist/layui/layui.js"></script>
<script>
    $(".comment-title").click(function (){
        var commentTitle = $(".comment-title").text();
        console.log(commentTitle);
        if(commentTitle == "显示评论"){
            $(".comment-title").text("关闭评论");
            getByPageNum(1);
            $(".replay-show-hiden").show();

        }else{
            $(".comment-title").text("显示评论");
            $(".replay-show-hiden").hide();
        }

    });
    function getByPageNum(pageNum) {
        var url;
        if(typeof(pageNum) == "number")
            url = "${pageContext.request.contextPath}/evaluate/${serverResponse.data.carId}/page/" + pageNum;
        else {
            url = "${pageContext.request.contextPath}/evaluate/${serverResponse.data.carId}/page";
            pageNum = 1;
        }
        $.get(url,null,
            function (result){
            $(".comment-ul").html("");
            if(result.code == 201){
                var liEle = '<h4>暂无评论</h4>';
                $(".comment-ul").append(liEle);
            }else{
                console.log(result);


                var infoArr =  result.data.list;
                for(var i = 0 ; i <infoArr.length;i++){
                var custId = infoArr[i].customer.custId;
                var custName = infoArr[i].customer.custName;
                var evaluateStarts = parseInt(infoArr[i].evaluate.evaluateStarts);
                var evaluateId = infoArr[i].evaluate.evaluateId;
                var evaluateContent = infoArr[i].evaluate.evaluateContent;
                var evaluateTime = infoArr[i].evaluate.evaluateTime;
                var evaluatePraisedCount = infoArr[i].evaluate.evaluatePraisedCount;
                    console.log(infoArr);
                    console.log(custName);
                    console.log(evaluateStarts);
                    console.log(evaluateContent);
                    console.log(evaluateTime);
                    console.log(evaluatePraisedCount);



                var oneLiEle = '<li class="comment-li ' + evaluateId + '">\n' +
                    '                        <div class="comment-customer">\n' +
                    '                            <div class="customer-img">\n' +
                    '                                <img src="${pageContext.request.contextPath}/images/customer1.png">\n' +
                    '                            </div>\n' +
                    '                            <div class="a-link">\n' +
                    '                                <h5 class="customer-name">' + custName + '</h5>\n' +
                    '                                <span class="type-text">' + evaluateContent + '</span>\n' +
                    '                                <span class="stars-show"></span>'+
                    '                                <div class="comment-handle">\n' +
                    '                                    <span class="evaluate-time">' + evaluateTime + '</span>\n' +
                    '                                    <a class="replay-handle" href="">回复</a>\n' +
                    '                                    <span>|</span>\n' +
                    '                                    <a href="javascript:void(0)">\n' +
                    '                                    <span style="display:none;" class="evaluate-id">' + evaluateId + '</span>\n' +
                    '                                   <span style="display:none;">0</span>' +
                    '                                        <span class="icon-act"></span>\n' +
                    '                                    </a>\n' +
                    '                                    <span  class="praise-number">' + evaluatePraisedCount + '</span>\n' +
                    '                                </div>\n' +
                    '\n' +
                    '                            </div>\n' +
                    '                        </div>\n' +
                    '                        <ul class="replay-ul">\n' +
                    '                        </ul>\n' +
                    '                    </li>';
                    $(".comment-ul").append(oneLiEle);
                    var ulNewClass = "."+evaluateId;
                    var starsPostion = "0 ";
                    if (evaluateStarts == 5) {
                        starsPostion += "0";
                    }else{
                        starsPostion +=-(176-((evaluateStarts-1)*44))+"px";
                    }

                    // console.log(starsPostion);
                    // if(evaluateStarts == 5){
                    //     starsPostion += "0";
                    // }else if(evaluateStarts == 4){
                    //     starsPostion += "-44px";
                    // }else if(evaluateStarts == 3){
                    //     starsPostion += "-88px";
                    // }else if(evaluateStarts == 2){
                    //     starsPostion += "-132px";
                    // }else if(evaluateStarts == 1){
                    //     starsPostion += "-176px";
                    // }

                    $(ulNewClass+" .stars-show").css(
                        "background-position",starsPostion
                    )

                    var customerReplyVOArr = infoArr[i].customerReplyVOList;
                    for(var j = 0; j < customerReplyVOArr.length;j++) {
                        var replyCustName = customerReplyVOArr[j].customer.custName;
                        var replyContext = customerReplyVOArr[j].reply.replyContent;
                        var replyTime = customerReplyVOArr[j].reply.replyTime;
                        console.log(replyCustName);
                        console.log(replyContext);
                        console.log(replyTime);
                        var twoLiEle = ' <li>\n' +
                            '                                <div class="replay-customer">\n' +
                            '                                    <div class="replay-img">\n' +
                            '                                        <img src="${pageContext.request.contextPath}/images/customer1.png">\n' +
                            '                                    </div>\n' +
                            '                                    <h6 class="replay-customer-name">' + replyCustName + '</h6>\n' +
                            '                                    <!--                            <h6>Smith</h6>-->\n' +
                            '                                    <span class="replay-text">' + replyContext + '</span>\n' +
                            '                                    <span class="replay-time">' + replyTime + '</span>\n' +
                            '                                </div>\n' +
                            '                            </li>';
                        $(ulNewClass+" .replay-ul").append(twoLiEle);
                    }


                }
                var pageNum = result.data.pageNum;
                var pages = result.data.pages;
                var prePage = result.data.prePage;
                var nextPage = result.data.nextPage;
                var hasPreviousPage = result.data.hasPreviousPage;
                var hasNextPage = result.data.hasNextPage;
                var total = result.data.total;
                var pageEle = '';
                '<li>\n' +
                '                            共有<span>56</span>条评价\n' +
                '                            第<span>1</span>页\n' +
                '                            <a href="">上一页</a>\n' +
                '                            <a href="">下一页</a>\n' +
                '                            共有<span>5</span>页\n' +
                '                        </li>'
                pageEle +='<li>\n' +
                    '                            共有<span>' + total + '</span>条评价\n';

                pageEle += '                            第<span>' + pageNum + '</span>页\n';
                if(hasPreviousPage)
                    pageEle += '                            <a href="javascript:getByPageNum(' + prePage + ')">上一页</a>\n';
                if(hasNextPage)
                    pageEle += '                            <a href="javascript:getByPageNum(' + nextPage + ')">下一页</a>\n';
                pageEle += '                            共有<span>' + pages + '</span>页\n' ;
                $(".comment-ul").append(pageEle);
            }

            }
            ,"json");


        $(".replay-show-hiden").click(function (event){
            var target = event.target;
            var custId = "${loginCustomer.custId}";

            if(custId == ""){
                window.location.href = "${pageContext.request.contextPath}/customer/login";
            }
            var text = target.parentElement.parentElement.children[1].textContent;
            if(text == "回复"){
                var status = target.parentElement.children[1].textContent;
                console.log(status);
                if(status == 0) {
                    target.parentElement.children[1].innerText = "1";
                    target.style.background = "url(../../images/praised_icon-act.svg)"

                }else {
                    target.parentElement.children[1].innerText = "0";
                    target.style.background = "url(../../images/praise_icon_act.svg)"
                }
                evaluateId = target.parentElement.firstElementChild.textContent;
                console.log(evaluateId);

                var url = "${pageContext.request.contextPath}/evaluate/"+evaluateId+'/'+custId+'/'+status;
                $.ajax({
                    type:"put",
                    url,
                    dataType:"json",
                    success:function (result) {
                        console.log("测试一下"+JSON.stringify(result))
                        target.parentElement.parentElement.lastElementChild.innerText=result.data;
                        var liClass = "."+evaluateId;
                        $(liClass+ " .praise-number").text()
                    }
                });
            }
            console.log(custId);

        })

    }


</script>
</body>
</html>
